<template>
  <div class="ContactUs">
    <Header title="联系我们"></Header>
    <div style="padding:42px 6px 0 6px">
      <div class="lianxiwe" v-for="(item,index) in shoplist" :key="index">
        <div>
          <div style="font-size: 14px;margin-top: 16px">{{item.name}}</div>
          <div style="font-size: 12px">联系电话:{{item.tel}}</div>
        </div>
        <div>
          <img src="static/icon/my_btn_contact_nav@3x.png" alt="联系我们" @click="maptu(item)">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Panel} from 'vux'
  import {BookList, wxAdmin} from '../../api/mine'
  import Header from './../Header'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'ContactUs',
    data () {
      return {
        shoplist: []
      }
    },
    created () {
      BookList().then(res => {
        this.shoplist = res.data.data
      })
    },
    methods: {
      maptu (item) {
        let _this = this
        wxAdmin({
          url: window.location.href.split('#')[0]
        }).then(res => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名，见附录1
            jsApiList: [
              'checkJsApi',
              'chooseWXPay',
              'getLocation',
              'scanQRCode',
              'openLocation',
              'translateVoice'
            ],
          })
          //微信地理位置功能
          wx.ready(() => {
            wx.openLocation({
              latitude: item.lat, // 纬度，浮点数，范围为90 ~ -90
              longitude: item.lon, // 经度，浮点数，范围为180 ~ -180。
              name: item.name, // 位置名
              address: item.address, // 地址详情说明
              scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
            })
          })
        })
      }
    },
    components: {
      Header,
      Panel
    },
  }
</script>

<style lang='less' type="text/less">
  .ContactUs {
    color: @font-color;
    .lianxiwe {
      display: flex;
      height: 80px;
      background: #fff;
      border-radius: 5px;
      padding: 0 12px;
      margin-top: 12px;
      & > div {
        flex: 1;
        &:first-child {
          font-size: 14px;
          color: #666666;
        }
        &:last-child {
          text-align: right;
          & > img {
            width: 90px;
            margin-top: 28px;
          }
        }
      }
    }
  }
</style>
